<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="1200"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
      cancelText="关闭"
    >
      <a-row :gutter="24">
        <a-col :span="16">
          <a-card title="选择表单权限字段" :bordered="true">
            <!-- 查询区域 -->
            <!-- table区域-begin -->
            <div>
              <a-table
                size="middle"
                bordered
                rowKey="id"
                :columns="columns1"
                :dataSource="dataSource1"
                :pagination="false"
                :loading="loading"
                :scroll="{ y: 240 }"
                :rowSelection="{
                  selectedRowKeys: selectedRowKeys,
                  onSelect: onSelect,
                  onChange: onSelectChange,
                  type: type,
                }"
                @change="handleTableChange"
              >
              </a-table>
            </div>
            <!-- table区域-end -->
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="权限选择" :bordered="true">
            <!-- table区域-begin -->
            <div>
              <a-table
                size="middle"
                bordered
                rowKey="id"
                :columns="columns2"
                :dataSource="dataSource2"
                :pagination="false"
                :loading="loading"
                :scroll="{ y: 240 }"
              >
                <span slot="action" slot-scope="text, record">
                  <a-button type="primary" size="small" @click="handleDelete(record)" icon="delete">删除</a-button>
                </span>
              </a-table>
            </div>
            <!-- table区域-end -->
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { filterObj } from '@/utils/util'
import { getAction } from '@/api/manage'
import { serviceApi } from '@/api/common.js'

export default {
  name: 'SelectDesformAuthModal',
  data() {
    return {
      title: '权限列表',
      names: [],
      visible: false,
      placement: 'right',
      description: '权限管理页面',
      // 查询条件
      queryParam: {},
      // 表头
      columns1: [
        {
          title: '权限字段',
          align: 'center',
          dataIndex: 'authTitle',
        },
        {
          title: '权限字段编码',
          align: 'center',
          dataIndex: 'authField',
        },
      ],
      columns2: [
        {
          title: '权限字段',
          align: 'center',
          width: 100,
          dataIndex: 'authTitle',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 数据集
      dataSource1: [],
      dataSource2: [],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
      type: 'radio',
      url: {
        list: serviceApi.auth + '/users',
        query: (desformCode) => `/desform/auth/query/${desformCode}?group=true`,
      },
      desformCode: '',
    }
  },
  props: ['permData'],
  created() {},
  methods: {
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1)
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      if (this.dataSource2.length <= 0) {
        this.$message.warning('请选用户信息')
        return
      }
      this.$emit('selectFinished', this.dataSource2[0])
      this.visible = false
    },
    select(desformCode) {
      this.visible = true
      console.log('desformCode:', desformCode)
      this.loadData(desformCode)
    },
    loadData(desformCode) {
      getAction(this.url.query(desformCode)).then((res) => {
        console.log('desform res:', res)
        if (res && res.success) {
          this.dataSource1 = res.result
          // 针对子表，特殊处理 authField编码
          this.dataSource1.map(function (e) {
            if (e.subTable) {
              e.authField = e.subKey + '::' + e.authField
              e.authTitle = e.subTitle + '::' + e.authTitle
              return e
            }
          })
          // update--begin--autor:lvdandan-----date:20200925------for：LOWCOD-619【流程】流程节点权限配置重复问题
          // 筛选已授权字段不再显示
          this.dataSource1 = this.dataSource1.filter((a) => !this.permData.some((b) => b.ruleCode == a.authField))
          // update--end--autor:lvdandan-----date:20200925------for：LOWCOD-619【流程】流程节点权限配置重复问题
        }
      })
    },
    getQueryParams() {
      var param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      // TODO 字段权限控制
    },
    onSelect(record, selected) {
      if (selected === true) {
        this.dataSource2 = []
        this.dataSource2.push(record)
      } else {
        this.dataSource2 = []
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectedRows
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    handleDelete: function (record) {
      this.dataSource2 = []
    },
    handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      console.log(sorter)
      // TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
  },
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}
</style>
